<template>
  <a-layout style="height:100%;overflow: hidden">
    <a-layout-content style="height:100%;overflow-y: auto">
      <div class="page-container is-form">
        <div class="app-container__body">
          <div class="leftside">
            <div :class="['title','blue',{'outline':activeModule == 'title'}]" @click="onModuleEdit('title',10)">
              {{resp.company.name}}
            </div>
            <div :class="['banner','blue',{'outline':activeModule == 'banner'}]" @click="onModuleEdit('banner',120)">
              <a-carousel effect="fade">
                <div v-for="(banner,bIndex) in resp.bannerList" :key="bIndex" v-if="banner.deleted == 'UN_DELETED'">
                  <img :src="banner.imageUrl" />
                </div>
              </a-carousel>
            </div>
            <ul :class="['category','blue',{'outline':activeModule == 'category'}]" @click="onModuleEdit('category',280)">
              <li v-for="(category,cIndex) in resp.categoryList" :key="cIndex" v-if="cIndex<4 && category.deleted == 'UN_DELETED'">
                <img v-if="category.imageUrl" :src="category.imageUrl" width="65" height="65" />
                <span class="c-title">{{category.name}}</span>
              </li>
            </ul>
            <div class="box">
              <div @click="onModuleEdit('block',380,blockIndex)"
                   :class="['block-item',{'outline':activeModule == 'block' && resp.blockIndex == blockIndex}]"
                   v-for="(block,blockIndex) in resp.blockList" :key="block.id"
                    v-if="block.deleted == 'UN_DELETED'">
                <div class="tit">
                  {{block.title}} <span class="default_tips">{{block.subTitle}}</span>
                </div>
                <ul class="block-goodslist grid-list" v-if="block.mode==='GRID'">
                  <li v-for="(goods,gIndex) in block.goodsList" :key="gIndex" v-if="goods.deleted == 'UN_DELETED'">
                    <div class="goods-item">
                      <div class="img">
                        <img :src="goods.cover" />
                      </div>
                      <p>{{goods.title}}</p>
                      <p class="tags" v-if="goods.tags">
                        <a-tag color="orange" v-for="(tag,tagIndex) in goods.tags.split(',')" :key="tagIndex">{{tag}}</a-tag>
                      </p>
                      <p class="price">￥{{goods.price}}</p>
                    </div>
                  </li>
                </ul>
                <ul class="block-goodslist list" v-else>
                  <li v-for="(goods,gIndex) in block.goodsList" :key="gIndex" v-if="goods.deleted == 'UN_DELETED'">
                    <div class="grid-item">
                      <div class="img">
                        <img :src="goods.cover" />
                      </div>
                      <div class="list_r">
                        <h3>{{goods.title}}</h3>
                        <p class="tags" v-if="goods.tags">
                          <a-tag color="orange" v-for="(tag,tagIndex) in goods.tags.split(',')" :key="tagIndex">{{tag}}</a-tag>
                        </p>
                        <p class="price">￥{{goods.price}}</p>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="block-template__add" @click="onAddBlock"><a-icon type="plus-circle" /> 添加模块</div>
            </div>
          </div>
          <div class="rightside">
            <div class="edit-dialog" v-if="activeModule != ''" :style="{'margin-top':mTop+'px'}">
              <div class="edit_dialog__body">
                <company-name v-if="activeModule =='title'" :company.sync="resp.company"></company-name>
                <category v-if="activeModule == 'category'" :categorys.sync="resp.categoryList"></category>
                <banner v-if="activeModule == 'banner'" :templateId="templateId" :banners.sync="resp.bannerList"></banner>
                <block v-if="activeModule =='block'" @delete="handleBlockDelete" @close="handleBlockClose" :templateId="templateId" :block.sync="resp.blockList[resp.blockIndex]"></block>
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-layout-content>
    <a-layout-footer style="height:60px;padding:10px 50px;">
      <a-button type="primary" @click="onSave" :loading="submitLoading" size="large"> 保 存 </a-button>
    </a-layout-footer>
  </a-layout>
</template>

<script>
  import { CompanyName,Banner,Category,Block} from "./components";
  import {getTemplateContent,saveTemplateContent} from "../../api/template";
  const MTemplate = {
    id:null,
    blockIndex:-1,
    company:{ id:null, name:'店铺名称'},
    categoryList:[],
    bannerList:[],
    blockList:[{
      id:null,
      title:'列表标题',
      subTitle:'',
      imageUrl:'',
      linkUrl:'',
      mode:'LIST',
      sort:1,
      goodsList:[],
      deleted:'UN_DELETED',
    }],
  }
  export default {
    components:{
      CompanyName,Banner,Category,Block
    },
    data(){
        return{
          templateId:null,
          headerTabName:'TemplateBuild',
          activeModule:'',//模块点击响应
          raw:{},
          resp:this.baseUtil.modelCopy(MTemplate),
          mTop:10,
          submitLoading: false
        }
    },
    watch:{

    },
    methods:{
      onModuleEdit(m,top,blockIndex) {
        this.activeModule = ''
        this.resp.blockIndex = blockIndex;
        this.$nextTick(()=>{
          this.activeModule = m;
          this.mTop = top;
        })
      },
      handleBlockClose(){
        this.activeModule = ''
        this.resp.blockIndex = -1
      },
      handleBlockDelete(result){
        let index = this.resp.blockIndex
        console.log("delete==>",result,index)
        if(result === null){
          this.resp.blockList.splice(index,1)
          this.handleBlockClose()
        }
      },
      onAddBlock(){
        this.resp.blockList.push({
          id:null,
          title:'列表标题',
          subTitle:'',
          imageUrl:'',
          linkUrl:'',
          mode:'LIST',
          showOrder:1,
          goodsList:[],
          deleted:'UN_DELETED',
        })
        this.onModuleEdit('block',380,this.resp.blockList.length-1)
      },
      async loadData(){
        let resp = await getTemplateContent(this.templateId);
        console.log("ok==>",resp);
        if(this.qUtil.validResp(resp)){
          this.raw  = this.baseUtil.modelCopy(resp.data);
          this.raw.blockIndex = -1;
          this.resp = this.baseUtil.modelCopy(this.raw)
          if(this.resp.blockList.length == 0) this.resp.blockList = MTemplate.blockList;
        }else this.$message.warning(resp.msg || '模板信息加载失败');
      },
      async onSave(){
        this.submitLoading = true
        let data = {...this.resp};
        data.templateId = this.templateId;
        let resp = await saveTemplateContent(data);
        this.submitLoading = false
        if(this.qUtil.validResp(resp)){
          this.$success({title:'保存成功!',okText:'确定',
            onOk(){location.reload();}
          });
        }else this.$message({ message: resp.msg, type: 'warning' });
      }
    },
    mounted(){
      this.templateId = parseInt(this.$route.query.id) || 1;
      if(this.templateId == 0){
        this.$message.error("模板加载失败")
        this.$router.push({name:"TemplateSelect"})
        return;
      }
      this.loadData();
    }
  }
</script>
<style scoped>
  .app-container__body {
    display: flex;
  }
	.leftside{
    flex-grow: 0;
		width: 400px;
		height: 821px;
		overflow: hidden;
		background: url(../../assets/images/indexbg.jpg) no-repeat center top;
		background-size:cover;
		border: 1px #dddddd solid;
		color: #333;
		font-size: 14px;
		text-align: center;
	}
	.leftside .title{
		width: 100%;
		height: 45px;
		line-height:45px;
		text-align: center;
		font-size: 18px;
		margin-top: 25px;
		cursor: pointer;
	}
	.leftside .banner{
		width: 100%;
		height: 138px;
		overflow: hidden;
		margin: 70px auto 10px auto;
		font-size: 24px;
		cursor: pointer;
		border-radius: 5px;
	}
	.leftside .banner .el-carousel{
		width: 345px;
		height: 138px;
		overflow: hidden;
		margin: 0 auto;
		border-radius: 5px;
	}
	.leftside .banner img{
		width: 100%;
		height: 100%;
	}
	.leftside .category{
		list-style: none;
		margin:0;
		padding: 6px 0 0 6px;
		height: 78px;
		overflow: hidden;
		cursor: pointer;
    text-align: left;
	}
	.leftside .category li{
    	position: relative;
		float: left;
		width: 65px;
		height: 65px;
    	margin-left: 10px;
		overflow:hidden;
		background: #000;
		border-radius: 5px;
	}
  .leftside .category li .c-title{
	    position: absolute;
	    left:0;
	    top:0;
	    z-index: 10;
	    display: block;
	    width:100%;
	    line-height: 65px;
	    text-align: center;
	    font-size: 14px;
	    color: #fff;
	}
  .leftside .category li img{
	  	width:100%;
	  	display: block;
	  	opacity: 0.6;
	}
	.leftside .box{
		height: auto;
		margin:17px 0;
    height:370px;
    overflow-y: auto;
	}
  .leftside .block-item{
    min-height: 200px;
    overflow: hidden;
  }
	.leftside .box .tit{
		font-size: 18px;
		text-align: left;
		padding:10px 0 0 20px;
		height: 30px;
		line-height: 30px;
		font-weight: bold;
		cursor: pointer;
	}
  .block-goodslist{
		list-style: none;
		padding:10px 16px 0 16px;
		cursor: pointer;
		margin:0;
    background-color: #fff;
	}
  .block-goodslist li{
		height: auto;
		overflow: hidden;
		margin-bottom:20px;
    padding:5px;
    box-shadow:1px 1px 2px #eee;
	}
  .block-goodslist .img{
		width:90px;
		height: 90px;
		line-height: 90px;
		overflow: hidden;
		float: left;
		background: #d3ece8;
	}
  .block-goodslist img{
		width: 100%;
		height: 100%;
		display: block;
	}
  .block-goodslist .list_r{
		margin-left:110px;
		height: auto;
		overflow: hidden;
		text-align: left;
	}
  .block-goodslist .list_r h3{
		font-size:16px;
		margin: 5px 0 0 0;
		padding: 0;
	}
	.block-goodslist p{
		font-size: 14px;
    padding:5px 0;
    color:#999;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
  .block-goodslist p.price{
    color:#f00;
  }
  .grid-list{
    margin-top:10px;
    text-align: left;
    padding:0 10px;
  }
  .grid-list li{
    display: inline-block;
    width:33%;
    text-align: center;
    box-shadow: none;
  }
  .grid-list .goods-item{
    margin:5px;
    border-radius:5px;
    box-shadow:0 1px 2px #eee;
  }
  .grid-list .img{
    width:100%;
    height:80px;
    float: none;
  }
  .grid-list .goods-item img{
    width: 100%;
    height: 80px;
    display: block;
  }
  .grid-list .goods-item p{
    padding:3px 0;
    font-size:12px;
  }
  .block-template__add{
    cursor: pointer;
    background-color: #2bb89a ;
    border: 1px #fff dashed;
    height:40px;
    line-height: 40px;
    color:#fff;
    text-align: center;
  }
	.leftside .blue{
		color: rgb(64, 158, 255);
	}
	.leftside .outline{
		border: 1px #2bb89a dashed;
	}
  .leftside .title:hover,.leftside .banner:hover,.leftside .category:hover,.leftside .block-item:hover{
    border: 1px #2bb89a dashed;
  }
	.rightside{
    flex-grow: 1;
	}
  .edit-dialog{
    margin-left:20px;
    width:642px;
    border:1px solid #E0E0E0;
    border-radius:10px;
  }
  .edit-dialog.is-category{
    width:320px;
  }
  .edit-dialog .edit_dialog__body{
    padding:20px;
  }
</style>
